篩選代辦事項

製作一個filter去篩選出toDoList中有那些事未完成，所以這邊再多製作一個handleFilter。

補充 : 不用…拷貝是因為flter()本身會回傳一個新的陣列，所以不用擔心他會改變原先的陣列。

const handleFilter = () => {
 let filtered = toDoList.filter(task => {
   return !task.complete;
 });
 setToDoList(filtered);
}

再將它傳入ToDoList元件中

<ToDoList toDoList={toDoList} handleToggle={handleToggle} handleFilter={handleFilter}/>

增加一個刪除按鈕

引入剛剛製作的handleFilter，並在ToDoList.js中增加按鈕，按鈕加上onClick去處發function。

function ToDoList({toDoList,handleToggle,handleFilter}){
    return(
        <div>
           {toDoList.map(todo=>{
            return(
                <ToDo todo={todo} handleToggle={handleToggle}/>
            )
           })}
           <button onClick={handleFilter}>Clear Completed</button>
        </div>
    )
}

清除功能完成，filter功能也可以延伸作為頁籤，在代辦事項中可以分為三個頁籤，分別為全部、已完成、未完成，透過filter去篩選出不同狀態的內容物在畫面中呈現。